<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="static/style_bt/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="static/style_bt/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="static/style_bt/bootstrap3-dialog/dist/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<link href="static/style_bt/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/style_bt/js/jquery.min.js"></script>
<script type="text/javascript" src="static/style_bt/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/style_bt/bootstrap3-dialog/dist/js/bootstrap-dialog.js"></script>
<script type="text/javascript" src="static/style_bt/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/style_bt/bootstrap-table/dist/bootstrap-table-locale-all.min.js"></script>
<script type="text/javascript" src="static/style_bt/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<title>Spring Demo</title>
</head>
<body>
<input type="hidden" id="user" value="${user }" />
<!-- <div class="table-responsive"> -->
<div class="panel-body" style="padding-bottom:0px;text-align: center;">
<!-- 	<div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_statu">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>  -->

	<div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
            </button>
            <button id="btn_detail" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查看详情
            </button>
        </div>
<table id="tableList" class="table table-striped table-bordered table-hover table-condensed" style="text-align: center">
</table>
</div>
</body>
<script type="text/javascript">
	$(function(){
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		//2.初始化Button的点击事件
		var oButtonInit = new ButtonInit();
		oButtonInit.Init();
		
	});
	
	var TableInit = function(){
		var oTableInit = new Object();
		oTableInit.Init = function(){
			$('#tableList').bootstrapTable({
				url: 'user/ajaxUserList.do',         //请求后台的URL（*）
	            method: 'POST',                      //请求方式（*）
	            toolbar: '#toolbar',                //工具按钮用哪个容器
	            striped: true,                      //是否显示行间隔色
	            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	            pagination: true,                   //是否显示分页（*）
	            sortable: false,                     //是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数（*）
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	            pageNumber:1,                       //初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数（*）
	            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
	            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
	            strictSearch: true,
	            showColumns: true,                  //是否显示所有的列
	            showRefresh: true,                  //是否显示刷新按钮
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: true,                //是否启用点击选中行
	            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
	            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
	            cardView: false,                    //是否显示详细视图
	            detailView: false,                   //是否显示父子表
	            columns:[{
	            	checkbox:true
	            },{
	            	field: 'userName',
	            	title: '账号',
	            	align:'center'
	            },{
	            	field: 'type',
	            	title: '类型',
	            	align:'center',
	            	formatter:function(value,row,index){
	            		if(value==1){
	            			return '管理员';
	            		}else{
	            			return '普通员工';
	            		}
	            	}
	            },{
	            	field: 'leader',
	            	title: '上级',
	            	align:'center',
	            	formatter:searchLeader
	            },{
	            	field: 'isOnline',
	            	title: '是否在线',
	            	align:'center',
	            	formatter:function(value, row, index){
	            		if(value==1){
	            			return '是';
	            		}
	            		return '否';
	            	}
	            },{
	            	field: 'age',
	            	title: '年龄',
	            	align:'center'
	            }]
			});
		};
		
		//得到查询的参数
		oTableInit.queryParams = function (params) {
			var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
					limit:params.limit, //页面大小
					offset:params.offset  //页码
			};
			return temp;
		};
		
		return oTableInit;
	};
	
	var ButtonInit = function(){
		var oInit = new Object();
		var postdata = {};
		oInit.Init = function(){
			//初始化页面上的按钮事件
		};
		
		return oInit;
	}
	
	function searchLeader(value, row, index){
		if(value!=null&&value!=''){
			$.ajax({
				url:'user/ajaxSelectUserById.do?id='+value,
				type:'get',
				success:function(obj){
					if(obj!=null){
						value = obj.userName;
					}
				},
				error:function(obj){
					alert('error');
				}
			});
		}
		
		return value;
	}
</script>
</html>